import { Component } from "react";
/* 类组件通信
1.父传子 直接通过props在子组件身上绑定父组件的数据即可
2.子传父 在子组件标签身上绑定父组件中的函数，子组件调用时传递参数给父组件 */

// 子组件
class Son extends Component {
  state = {};
  render() {
    // 使用 this.props 获取父组件传递的props数据
    return (
      <>
        <div>我是子组件</div>
        <div>{this.props.msg}</div>
        <button onClick={() => this.props.onSendMsg("哈哈哈哈")}>
          点我给父组件传递数据
        </button>
      </>
    );
  }
}
// 父组件
class Parent extends Component {
  state = {
    msg: "this is parent msg",
  };
  getSonMsg = (msg) => {
    console.log("子组件传递的数据：" + msg);
  };
  render() {
    return (
      <>
        <div>我是父组件</div>
        {/* 通过props向子组件传递数据 */}
        <Son msg={this.state.msg} onSendMsg={this.getSonMsg} />
      </>
    );
  }
}

function App() {
  return (
    <>
      <Parent />
    </>
  );
}

export default App;
